function createCss(top, left, width, height) {
    var result = {
        position: 'absolute',
        top: top,
        left: left
    };
    if (width && height) {
        result['width'] = width;
        result['height'] = height;
    }
    return  result
}

function romperBomba() {
    var bomba = $('#myList').find(':selected').val();
    $('#bomba' + bomba).trigger('romperBomba')
}

//noinspection JSUnusedGlobalSymbols
function onPageLoad() {

    var siloMalta = new figure.Container('siloMalta', createCss(TOP_MALTA,LEFT_MALTA), 'silo');
    siloMalta.draw();

    var tolvaSum = new figure.Container('tolvaSum', createCss(TOP_TOLVA_SUM, LEFT_TOLVA_SUM), 'tolva');
    tolvaSum.draw()

    var tamiz = new figure.Tamiz('tamiz', createCss(TOP_TAMIZ, LEFT_TOLVA_SUM));
    tamiz.draw();

    var molido = new figure.Molino('molido', createCss(TOP_MOLINO, LEFT_MOLINO));
    molido.draw();

    var siloAdjuntos = new figure.Container('siloAdjuntos', createCss(TOP_ADJ, LEFT_ADJ), 'silo');
    siloAdjuntos.draw();

    var tolvaDosifA = new figure.Container('tolvaA', createCss(TOP_TOLVA_DOSIF_1, LEFT_TOLVA_DOSIF_1), 'tolva');
    tolvaDosifA.draw();

    var tolvaDosifB = new figure.Container('tolvaB', createCss(TOP_TOLVA_DOSIF_2, LEFT_TOLVA_DOSIF_2), 'tolva');
    tolvaDosifB.draw();

    new figure.Pipe('pipeMalta', createCss(TOP_PIPE_MALTA, LEFT_PIPE_MALTA, WIDTH_PIPE_MALTA, PIPE_DIAMETER));
    new figure.Pipe('pipeMalta2', createCss(TOP_PIPE_MALTA_2, LEFT_PIPE_MALTA_2, PIPE_DIAMETER, HEIGHT_PIPE_MALTA_2));
    new figure.Pipe('pipeMalta3', createCss(TOP_PIPE_MALTA_3, LEFT_PIPE_MALTA_3, WIDTH_PIPE_MALTA_3, PIPE_DIAMETER));

    new figure.Pipe('pipeTolva', createCss(TOP_PIPE_TOLVA, LEFT_PIPE_TOLVA, PIPE_DIAMETER, HEIGHT_PIPE_TOLVA));
    new figure.Pipe('pipeTamizMolido', createCss(TOP_PIPE_SUM, LEFT_PIPE_SUM, PIPE_DIAMETER, HEIGHT_PIPE_SUM));

    new figure.Pipe('pipeTamizMolido2', createCss(TOP_PIPE_TAMIZ, LEFT_PIPE_TAMIZ, WIDTH_PIPE_TAMIZ, PIPE_DIAMETER));
    new figure.Pipe('pipeTamizMolido3', createCss(TOP_PIPE_TAMIZ2, LEFT_PIPE_TAMIZ2, PIPE_DIAMETER, HEIGHT_PIPE_TAMIZ2));

    new figure.Pipe('pipeTamizMolido4', createCss(TOP_PIPE_MOLINO, LEFT_PIPE_MOLINO, WIDTH_PIPE_MOLINO, PIPE_DIAMETER));
    new figure.Pipe('pipeTamizMolido5', createCss(TOP_PIPE_MOLINO2, LEFT_PIPE_MOLINO2, PIPE_DIAMETER, HEIGHT_PIPE_MOLINO2));

    new figure.Pipe('pipeAdjuntos', createCss(TOP_PIPE_ADJ, LEFT_PIPE_ADJ, WIDTH_PIPE_ADJ, PIPE_DIAMETER));
    new figure.Pipe('pipeAdjuntos2', createCss(TOP_PIPE_ADJ_2, LEFT_PIPE_ADJ_2, PIPE_DIAMETER, HEIGHT_PIPE_ADJ_2));
    new figure.Pipe('pipeAdjuntos3', createCss(TOP_PIPE_ADJ_3, LEFT_PIPE_ADJ_3, WIDTH_PIPE_ADJ_3, PIPE_DIAMETER));
    new figure.Pipe('pipeDosifA', createCss(TOP_PIPE_DOSIF_1_2, LEFT_PIPE_DOSIF_1_2, WIDTH_PIPE_DOSIF_1_2, PIPE_DIAMETER));

    new figure.Pipe('pipeDosifB', createCss(TOP_PIPE_TOLVA, LEFT_PIPE_TOLVA2, PIPE_DIAMETER, HEIGHT_PIPE_DOSIF2_1));
    new figure.Pipe('pipeDosifB2', createCss(TOP_PIPE_TOLVA + PIPE_DIAMETER, LEFT_PIPE_DOSIF2 , WIDTH_PIPE_DOSIF_2, PIPE_DIAMETER));
    new figure.Pipe('pipeDosifB3', createCss(TOP_PIPE_TOLVA + PIPE_DIAMETER, LEFT_PIPE_DOSIF2 , PIPE_DIAMETER, HEIGHT_PIPE_DOSIF2));
    new figure.Pipe('pipeDosifB4', createCss(TOP_PIPE_TOLVA + PIPE_DIAMETER, LEFT_PIPE_DOSIF2_4, PIPE_DIAMETER, HEIGHT_PIPE_DOSIF2));

    var ollaCrudos = new figure.Olla('ollaCrudos', createCss(TOP_OLLA_CRUDOS, LEFT_OLLA_CRUDOS));
    ollaCrudos.draw();

    var ollaMezclas = new figure.Olla('ollaMezclas', createCss(TOP_OLLA_MEZCLAS, LEFT_OLLA_MEZCLAS));
    ollaMezclas.draw();

    var ollaFiltr= new figure.Olla('ollaFiltr', createCss(TOP_OLLA_FILTR, LEFT_OLLA_FILTR));
    ollaFiltr.draw();

    var ollaCoccion= new figure.Olla('ollaCoccion', createCss(TOP_OLLA_COCCION, LEFT_OLLA_COCCION));
    ollaCoccion.draw();

    new figure.Pipe('pipeOllas', createCss(TOP_PIPE_OLLAS, LEFT_PIPE_OLLAS, WIDTH_PIPE_OLLAS, PIPE_DIAMETER));
    new figure.Pipe('pipeMezcla', createCss(TOP_PIPE_MEZCLA, LEFT_PIPE_MEZCLA, PIPE_DIAMETER, HEIGHT_PIPE_MEZCLA));
    new figure.Pipe('pipeMezcla2', createCss(TOP_PIPE_MEZCLA_2, LEFT_PIPE_MEZCLA_2, WIDTH_PIPE_MEZCLA_2, PIPE_DIAMETER));

    new figure.Pipe('pipeAfecho', createCss(TOP_PIPE_FILTR, LEFT_PIPE_FILTR, PIPE_DIAMETER, HEIGHT_PIPE_FILTR));
    new figure.Pipe('pipeFiltr', createCss(TOP_PIPE_FILTR2, LEFT_PIPE_FILTR2, PIPE_DIAMETER, HEIGHT_PIPE_FILTR2));
    new figure.Pipe('pipeFiltr2', createCss(TOP_PIPE_FILTR3, LEFT_PIPE_FILTR3, WIDTH_PIPE_FILTR3, PIPE_DIAMETER));

    new figure.Pipe('pipeOllaCoccion', createCss(TOP_PIPE_OLLA_COCCION, LEFT_PIPE_OLLA_COCCION, WIDTH_PIPE_OLLA_COCCION, PIPE_DIAMETER));
    new figure.Pipe('pipeOllaCoccion2', createCss(TOP_PIPE_OLLA_COCCION_2, LEFT_PIPE_OLLA_COCCION_2, PIPE_DIAMETER, HEIGHT_PIPE_OLLA_COCCION_2));
    new figure.Pipe('pipeOllaCoccion3', createCss(TOP_PIPE_OLLA_COCCION_3, LEFT_PIPE_OLLA_COCCION_3, WIDTH_PIPE_OLLA_COCCION_3, PIPE_DIAMETER));

    var afecho = new figure.Container('afecho', createCss(TOP_AFECHO, LEFT_AFECHO), 'tolva');
    afecho.draw();

    var bombaOllas = new figure.Bomb('bombaOllas', createCss(TOP_BOMBA_OLLAS, LEFT_BOMBA_OLLAS));
    bombaOllas.draw();

    var bombaMezcla = new figure.Bomb('bombaMezcla', createCss(TOP_BOMBA_MEZCLA, LEFT_BOMBA_MEZCLA));
    bombaMezcla.draw();

    var bombaFiltr = new figure.Bomb('bombaAfecho', createCss(TOP_PIPE_FILTR + HEIGHT_PIPE_FILTR/2, LEFT_PIPE_FILTR - 5));
    bombaFiltr.draw();

    var bombaFiltr2 = new figure.Bomb('bombaFiltr2', createCss(TOP_PIPE_FILTR2 + HEIGHT_PIPE_FILTR2 - 13, LEFT_PIPE_FILTR2 - 5));
    bombaFiltr2.draw();

    var sedimentation = new figure.Sedimentation('sedimentation', createCss(TOP_SEDIMENTATION,LEFT_SEDIMENTATION));
    sedimentation.draw();

    new figure.Pipe('pipeOllaCoccion4', createCss(TOP_PIPE_SEDIMENT, LEFT_PIPE_SEDIMENT, PIPE_DIAMETER, HEIGHT_PIPE_SEDIMENT));
    new figure.Pipe('pipeOllaCoccion5', createCss(TOP_PIPE_SEDIMENT2, LEFT_PIPE_SEDIMENT2, WIDTH_PIPE_SEDIMENT2, PIPE_DIAMETER));

    var bombasediment = new figure.Bomb('bombaOllaCoccion4', createCss(TOP_PIPE_SEDIMENT + HEIGHT_PIPE_SEDIMENT/2, LEFT_PIPE_SEDIMENT - 5));
    bombasediment.draw();

    var tank_f = new figure.Tank('tank_f',createCss(TOP_TANK_F,LEFT_TANK_F),'fermentacion');
    tank_f.draw();

    new figure.Pipe('pipeEtanol', createCss(TOP_PIPE_ETANOL, LEFT_PIPE_ETANOL, WIDTH_PIPE_ETANOL, PIPE_DIAMETER));

    var bombaTankF = new figure.Bomb('bombaEtanol', createCss(TOP_PIPE_ETANOL -8, LEFT_PIPE_ETANOL + WIDTH_PIPE_ETANOL/2));
    bombaTankF.draw();

    var etanol = new figure.DomFigure('etanol');
    etanol.createElement('div', {
        id: 'etanol',
        text: 'etanol',
        css: {
            position: 'absolute',
            top: TOP_PIPE_ETANOL - 5,
            left: LEFT_PIPE_ETANOL + WIDTH_PIPE_ETANOL,
            cursor : 'pointer',
            'border-style': 'solid',
            'border-color':'#98bf21',
            'background':'#90af91'
        },
        'class': 'unselectable',
        unselectable: 'on'
    });


    var valvula1 = new figure.Valvula('valvula1', createCss(TOP_VALVULA_1, LEFT_VALVULA_1));
    valvula1.draw('yellow');
    var valvula2 = new figure.Valvula('valvula2', createCss(TOP_VALVULA_2, LEFT_VALVULA_2));
    valvula2.draw('yellow');
    var valvula3 = new figure.Valvula('valvula3', createCss(TOP_VALVULA_3, LEFT_VALVULA_3));
    valvula3.draw('yellow');

    var cooling = new figure.Cooling('cooling',createCss(TOP_COOLING,LEFT_COOLING),'pre_ferm');
    cooling.draw();

    new figure.Pipe('pipeCooling', createCss(TOP_PIPE_COOLING, LEFT_PIPE_COOLING, WIDTH_PIPE_COOLING, PIPE_DIAMETER));

    new figure.Pipe('pipeProCooling', createCss(TOP_PIPE_TANK_F, LEFT_PIPE_TANK_F, PIPE_DIAMETER, HEIGHT_PIPE_TANK_F));

    var cooling2 = new figure.Cooling('cooling2',createCss(TOP_COOLING2,LEFT_COOLING2), 'post_ferm');
    cooling2.draw();

    new figure.Pipe('pipeTank', createCss(TOP_PIPE_COOLING2, LEFT_PIPE_COOLING2, PIPE_DIAMETER,HEIGHT_PIPE_COOLING2));
    new figure.Pipe('pipeTank2', createCss(TOP_PIPE_COOLING2_2, LEFT_PIPE_COOLING2_2, WIDTH_PIPE_COOLING2_2, PIPE_DIAMETER));

    var tank_m = new figure.Tank('tank_m',createCss(TOP_TANK_M,LEFT_TANK_M), 'maduracion');
    tank_m.draw();

    new figure.Pipe('levadura', createCss(TOP_LEVADURA, LEFT_LEVADURA, PIPE_DIAMETER, HEIGHT_LEVADURA));

    var elem = $('<div/>', {id: 'levaduraText', text: 'Levadura', css: {position: 'absolute', top: TOP_LEVADURA - 12, left: LEFT_LEVADURA - 7}});
    $("body").append(elem);

    new figure.Pipe('pipeMad', createCss(TOP_PIPE_MAD, LEFT_PIPE_MAD, PIPE_DIAMETER, HEIGHT_PIPE_MAD));
    new figure.Pipe('pipeMad2', createCss(TOP_PIPE_MAD2, LEFT_PIPE_MAD2, WIDTH_PIPE_MAD2, PIPE_DIAMETER));

    var filtro = new figure.Filtro('filtro', createCss(TOP_FILTRO, LEFT_FILTRO));
    filtro.draw();

    var bombaFiltro = new figure.Bomb('bombaMad',createCss(TOP_BOMBA_FILTRO,LEFT_BOMBA_FILTRO));
    bombaFiltro.draw();

    new figure.Pipe('pipeMad3', createCss(TOP_PIPE_A, LEFT_PIPE_A, WIDTH_PIPE_A, PIPE_DIAMETER));
    new figure.Pipe('pipeMad4', createCss(TOP_PIPE_A2, LEFT_PIPE_A2, PIPE_DIAMETER, HEIGHT_PIPE_A2));
    new figure.Pipe('pipeMad5', createCss(TOP_PIPE_A3, LEFT_PIPE_A3, WIDTH_PIPE_A3, PIPE_DIAMETER));

    var tank_a = new figure.Tank('tank_a', createCss(TOP_TANK_A, LEFT_TANK_A), 'maduracion');
    tank_a.draw();

    // column 1
    tolvaSum.addIndicator('dialSum', 0, 'Lts', 10, 20, 0, 6000, 1, 'bascula');
    ollaCrudos.addIndicator('mostoCrudo',1.15, null, 55, -5, 0, 4000, 1, 'sensorConcentracion');
    ollaCoccion.addIndicator('phCoccion',6.13 , null, 55, -5, 1, 700, 1, 'sensorConcentracion');
    var c1 = valvula1.addIndicator('dialC1', 0, 'm/s', -8, -42, 0.1, 10, 0.01, 'caudalimetro');

    // column 2
    tolvaDosifA.addIndicator('dialTolva', 0, 'Lts', 10, 20, 0, 6000, 1, 'bascula');
    ollaMezclas.addIndicator('dialMezclas',50, 'ºC', 37, -5, -10, 100, 1, 'termometro', [50-55]);
    var termometroPreFermentacion = cooling.addIndicator('dialCool', 8, 'ºC', -15, 20, -10, 100, 1, 'termometro', [5,10]);
    var c2 = valvula2.addIndicator('dialC2', 0, 'm/s', -8, -42, 0.1, 10, 0.01, 'caudalimetro');

    // column 3
    var basculaTolvaDosifB = tolvaDosifB.addIndicator('dialTolva2', 0, 'Lts', 10, 20, 0, 6000, 1, 'mezcladora', 0.5);
    var basculaOllaMezclas = ollaMezclas.addIndicator('dialMezclas2', 0, 'Lts', 37, 37, 0, 4000, 1, 'mezcladora', 0.5);
    var basculaFermentacion = tank_f.addIndicator('dialF', 0, 'Lts', 20, 0, 0, 5000, 1, 'basculaFermentacion');
    var c3 = valvula3.addIndicator('dialC3', 0, 'm/s', -8, -42, 0.1, 10, 0.01, 'caudalimetro');

    //column 4
    ollaCrudos.addIndicator('dialCrudos',98, 'ºC', 37, -5, -10, 100, 1, 'termometro',[95-100]);
    ollaFiltr.addIndicator('dialFiltr', 0, 'Lts', 37, 37, 0,  4000, 1, 'bascula');
    var sensorSugar = tank_f.addIndicator('dialAzucar', 6.8, 'ºP', figure.tankFermSizes.HEIGHT_TOTAL, 0, 0, 7, 0.01, 'sensorAzucar', [3.5, 2.7]);
    tank_m.addIndicator('dialM', 0, 'Lts', 20, 60, 0, 20000, 1, 'bascula');

    // column 5
    var basculaOllaCrudos = ollaCrudos.addIndicator('dialCrudos2', 0, 'Lts', 37, 37, 0, 4000, 1, 'mezcladora', 0.535);
    ollaCoccion.addIndicator('dialCoccion2', 0, 'Lts', 37, 37, 0, 4000, 1, 'bascula');
    var termometroPostFermentacion = cooling2.addIndicator('dialCool2', 2, 'ºC', 0, 17, -10, 100, 1, 'termometro',[0-5]);
    tank_a.addIndicator('dialA', 0, 'Lts', 20, 60, 0, 20000, 1, 'bascula');

    var clock = tank_f.addIndicator('dialClock', 0, 'horas', 10, 50, 0, 168, 1, 'reloj');

    var alarm = new figure.Alarm('alarmaGeneral', createCss(540, 250), 30);
    var alarm2 = new figure.Alarm('alarmaGeneral2', createCss(540, 190), 30);
    var alarm3 = new figure.Alarm('alarmaGeneral3', createCss(540, 310), 30);
    alarm.draw();
    alarm2.draw();
    alarm3.draw();

    $("#start").click(function start() {
        if (!figure.startAnimation) {
            figure.startAnimation = true;
            $('.pipeMalta').trigger('startSimulation');
            $('.pipeAdjuntos').trigger('startSimulation');
            $('.pipeTamizMolido').trigger('startSimulation');
            $('.pipeTolva').trigger('startSimulation');
            $('.pipeDosifA').trigger('startSimulation');
            $('.pipeDosifB').trigger('startSimulation');
            $('.pipeOllas').trigger('startSimulation');
            $('.pipeFiltr').trigger('startSimulation');
            $('.pipeAfecho').trigger('startSimulation');
            $('.pipeMezcla').trigger('startSimulation');
            $('.pipeOllaCoccion').trigger('startSimulation');
            $('.pipeCooling').trigger('startSimulation');
            $('.pipeProCooling').trigger('startSimulation');
            $('.pipeTank').trigger('startSimulation');
            $('.pipeMad').trigger('startSimulation');
            $('.levadura').trigger('startSimulation');
            $('.pipeEtanol').trigger('startSimulation');
            $('#formdialSum').trigger('growUp', [['pipeTamizMolido'],['pipeMalta']]);
            $('#formdialTolva').trigger('growUp', [['pipeTolva','pipeDosifA'],['pipeAdjuntos']]);
            $('#formdialTolva2').trigger('growUp', [['pipeDosifB'],['pipeTamizMolido','pipeDosifA'], basculaTolvaDosifB]);
            $('#formdialCrudos2').trigger('growUp', [['pipeOllas'],['pipeDosifB', 'pipeTolva'], basculaOllaCrudos]);
            $('#formdialMezclas2').trigger('growUp', [['pipeMezcla'],['pipeOllas','pipeDosifB'], basculaOllaMezclas]);
            $('#formdialFiltr').trigger('growUp', [['pipeFiltr', 'pipeAfecho'],['pipeMezcla']]);
            $('#formdialCoccion2').trigger('growUp', [['pipeOllaCoccion'],['pipeFiltr']]);
            $('#formdialCool').trigger('cool', ['pipeOllaCoccion','pipeCooling',termometroPreFermentacion]);
            $('#formdialCool2').trigger('cool', ['pipeProCooling','pipeTank',termometroPostFermentacion]);
            $('#formdialF').trigger('growUp', ['pipeCooling','pipeProCooling', sensorSugar, tank_f, clock, valvula1, valvula2, valvula3]);
            $('#formdialM').trigger('growUp', [['pipeMad'],['pipeTank']]);
            $('#formdialA').trigger('growUp', [['pipeGhost'],['pipeMad']]);
            $('#formdialAzucar').trigger('decrease', ['pipeEtanol', basculaFermentacion, sensorSugar, tank_f, valvula2, valvula3]);
            $('#formdialClock').trigger('overtime', [basculaFermentacion]);
            $('#formdialC1').trigger('measure', [c1]);
            $('#formdialC2').trigger('measure', [c2]);
            $('#formdialC3').trigger('measure', [c3]);
        }
        figure.stopAnimation = false;
        var start = $('#start');
        start[0].disabled = true;
        start[0].innerHTML = "Resume Simulation!";
        $('#pause')[0].disabled = false;

    });

    $("#pause").click(function pause() {
        $('#start')[0].disabled = false;
        $('#pause')[0].disabled = true;
        figure.stopAnimation = true;
    })
}